import React from 'react';
import BasicSlider from './BasicSlider';
import RangeSlider from './RangeSlider';
import VerticalSlider from './VerticalSlider';
import TooltipSlider from './TooltipSlider';
import CustomSlider from './CustomSlider';
import DateSlider from './DateSlider';
import MergeTooltipSlider from './MergeTooltipSlider';
import InputSlider from './InputSlider';
import './styles.css';

const Examples = () => {
  return (
    <div className="examples-container">
      <h1>NoUiSlider React 组件示例</h1>
      <div className="examples-grid">
        <div className="example-item">
          <BasicSlider />
        </div>
        <div className="example-item">
          <RangeSlider />
        </div>
        <div className="example-item">
          <VerticalSlider />
        </div>
        <div className="example-item">
          <TooltipSlider />
        </div>
        <div className="example-item">
          <CustomSlider />
        </div>
        <div className="example-item">
          <DateSlider />
        </div>
        <div className="example-item">
          <MergeTooltipSlider />
        </div>
        <div className="example-item">
          <InputSlider />
        </div>
      </div>
    </div>
  );
};

export default Examples; 